<template>
    <div class="json-container">
        <!-- 左侧输入区域 -->
        <div class="input-area">
            <div class="input-header">
                <n-space>
                    <n-button @click="clearInput" size="small">
                        清空输入
                    </n-button>
                    <n-button @click="formatInput" size="small" :disabled="!inputJson">
                        格式化
                    </n-button>
                </n-space>
            </div>
            <div class="input-content">
                <n-input v-model:value="inputJson" type="textarea" placeholder="请输入JSON字符串" :autosize="false"
                    style="height: 75%;" @update:value="handleInputChange" />
            </div>
        </div>
        <!-- 右侧格式化显示区域 -->
        <div class="output-area">
            <div class="output-content">
                <json-viewer :json-string="formattedJson" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch, defineEmits, defineProps } from 'vue'
import view from '@renderer/util/ui/ViewUtil'
import JsonViewer from './JsonViewer.vue'

const props = defineProps({
    initialInput: {
        type: String,
        default: ''
    },
    initialFormatted: {
        type: String,
        default: ''
    }
})

const emit = defineEmits(['contentChange'])

const inputJson = ref(props.initialInput)
const formattedJson = ref(props.initialFormatted)

const handleInputChange = () => {
    emit('contentChange', inputJson.value, formattedJson.value)
}

const clearInput = () => {
    inputJson.value = ''
    formattedJson.value = ''
    handleInputChange()
}

const formatInput = () => {
    try {
        const jsonObj = JSON.parse(inputJson.value)
        const formatted = JSON.stringify(jsonObj, null, 2)
        inputJson.value = formatted
        formattedJson.value = JSON.stringify(jsonObj)
        handleInputChange()
    } catch (error) {
        formattedJson.value = ''
        view.alertErrorMessage('JSON格式错误,请检查输入')
    }
}

// 监听初始值变化
watch(() => props.initialInput, (newVal) => {
    inputJson.value = newVal
})

watch(() => props.initialFormatted, (newVal) => {
    formattedJson.value = newVal
})
</script>

<style scoped>
.json-container {
    display: flex;
    gap: 20px;
    padding-left: 20px;
    padding-right: 20px;
    height: calc(100vh - 120px);
}

.input-area,
.output-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.input-header {
    margin-bottom: 8px;
    flex-shrink: 0;
}

.input-content,
.output-content {
    flex: 1;
    min-height: 0;
    position: relative;
}

:deep(.input-content .n-input) {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

:deep(.input-content .n-input__textarea) {
    height: 100% !important;
}

.output-content {
    overflow: auto;
    border-radius: 4px;
    padding-top: 8px;
}

:deep(.output-content .json-viewer) {
    height: auto;
    min-height: 100%;
}
</style>